<template>
  <page-container>
    <h3>1: 表格的合并演示</h3>
    <!-- show-summary - 展示末尾合计行，默认相加各行值 -->
    <el-table
      :data="tableData"
      :span-method="handleSpanMethod"
      border
      show-summary
      style="width: 80%; margin-top: 20px; margin-bottom: 20px"
    >
      <el-table-column prop="dept" label="部门" width="120" />
      <el-table-column prop="name" label="姓名" width="150" />
      <el-table-column prop="task" label="任务" width="120" />
      <el-table-column prop="progress" label="进度" width="120" />
      <el-table-column prop="status" label="状态" />
    </el-table>

    <!-- 表格拖拽 -->
    <h3>2: 拖拽表格的演示</h3>
    <drag-table class="dragTable" />
  </page-container>
</template>

<script setup>
import { ref } from 'vue'
import DragTable from './index_drag.vue'

// 表格数据（设计独立的合并场景，避免冲突）
const tableData = ref([
  { dept: '产品部', name: '张三', task: '需求设计', progress: '100', status: '已完成' },
  { dept: '产品部', name: '张三', task: '原型制作', progress: '100', status: '已完成' },
  { dept: '产品部', name: '李四', task: '需求评审', progress: '80', status: '进行中' },
  { dept: '开发部', name: '王五', task: '前端开发', progress: '60', status: '进行中' },
  { dept: '开发部', name: '赵六', task: '后端开发', progress: '50', status: '进行中' },
  { dept: '测试部', name: '孙七', task: '功能测试', progress: '0', status: '未开始' }
])

// 全局合并方法（核心逻辑）
/**
 * 1：行与列的索引不算表头行，只算数据行/列
 * 2：return { rowspan: 3, colspan: 1 } 可以写成 return [3,1]。表示当前行/列的3行合并成一行。
 * 3：被合并的行列也要精准找到，并返回 [0,0]
 * 4：默认不合并 return { rowspan: 1, colspan: 1 } 必须加上！因为函数必须有返回值，对于不需合并的行/列则返回该默认值
 */
const handleSpanMethod = ({ rowIndex, columnIndex }) => {
  // 1. 部门列（columnIndex=0）行合并：相同部门连续合并
  if (columnIndex === 0) {
    // 产品部有3行（索引0-2）
    if (rowIndex === 0) return { rowspan: 3, colspan: 1 }
    if (rowIndex === 1 || rowIndex === 2) return { rowspan: 0, colspan: 0 }

    // 开发部有2行（索引3-4）
    if (rowIndex === 3) return { rowspan: 2, colspan: 1 }
    if (rowIndex === 4) return { rowspan: 0, colspan: 0 }
  }

  // 2. 姓名列（columnIndex=1）行合并：张三有2行（索引0-1）
  if (columnIndex === 1) {
    if (rowIndex === 0) return { rowspan: 2, colspan: 1 }
    if (rowIndex === 1) return { rowspan: 0, colspan: 0 }
  }

  // 3. 进度列（columnIndex=3）列合并：产品部已完成项合并进度+状态（索引0）
  if (columnIndex === 3) {
    if (rowIndex === 0) return { rowspan: 1, colspan: 2 }
  }

  // 4. 状态列（columnIndex=4）：被进度列合并时不显示（索引0）
  if (columnIndex === 4) {
    if (rowIndex === 0) return { rowspan: 0, colspan: 0 }
  }

  // 默认不合并
  return { rowspan: 1, colspan: 1 }
}
</script>

<style lang="scss" scoped>
.dragTable {
  margin-top: 10px;
}
</style>
